<script setup lang="ts">
/**
 * @name ElectricityRateAnalysis
 * @description 电度电费分析
 */
import type { DatePickType } from 'element-plus'
import dayjs from 'dayjs'
import PieChart from './components/PieChart.vue'
import LineChart from './components/LineChart.vue'
import type { Point } from '@/components/ReadonlyPointTree/ReadonlyPointTree'
import { STORAGE_MODES } from '@/enum/modules/indicator'
import { CHART_SYMBOL } from '@/symbol'
import { useElectricityRateAnalysis } from '@/mixins/MixinElectricityRateAnalysis'

const [point, setPoint] = useState<Point | null>(null)
const timeType = ref(STORAGE_MODES.DAY)
const timeRange = ref<[string, string]>([
  dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
  dayjs().format('YYYY-MM-DD'),
])
const pickerType = computed<DatePickType>(() => {
  switch (timeType.value) {
    case STORAGE_MODES.DAY:
      return 'daterange'
    case STORAGE_MODES.MONTH:
      return 'monthrange'
    default:
      return 'daterange'
  }
})
const pickerFormatter = computed(() => {
  switch (timeType.value) {
    case STORAGE_MODES.DAY:
      return 'YYYY-MM-DD'
    case STORAGE_MODES.MONTH:
      return 'YYYY-MM'
    default:
      return 'YYYY-MM-DD'
  }
})
const autoResizeEnabled = inject<
  null | ((callback?: () => void) => void)
    >(CHART_SYMBOL.RESIZE_ENABLE)
const {
  loading,
  pieData1,
  pieData2,
  pieTitle1,
  pieTitle2,
  lineData1,
  lineData2,
  getAnalyseData,
} = useElectricityRateAnalysis()

const CONSUMPTION = 1
const CONSUMPTION_TEXT = '消费量'
const COST = 2
const COST_TEXT = '成本'
const type = ref(CONSUMPTION)
const lineData = computed(() => {
  return unref(type) === CONSUMPTION && lineData1.value.title === CONSUMPTION_TEXT
    ? lineData1
    : lineData2
})

function handleClickNode(o: Point) {
  setPoint(o)
}
function clickSearch() {
  const pointId = unref(point)?.id
  const data = {
    timeType: unref(timeType),
    startTime: unref(timeRange)[0] || '',
    endTime: unref(timeRange)[1] || '',
  }
  if (pointId && data.timeType && data.startTime && data.endTime) {
    getAnalyseData(pointId, data)
  }
}

watchEffect(() => {
  clickSearch()
})

onMounted(() => {
  autoResizeEnabled?.()
})
</script>

<template>
  <div class="padding-sm flex container">
    <div class="points-container">
      <ReadonlyPointTree fire @click-node="handleClickNode" />
    </div>
    <div v-loading="loading" element-loading-custom-class="global-loading" class="margin-left-sm flex-fillRemaining roll flex-direction flex">
      <div class="width-fill flex-shrink-0">
        <ElForm inline>
          <ElFormItem label="时间类型">
            <ElRadioGroup v-model="timeType">
              <ElRadio :value="STORAGE_MODES.DAY">
                日
              </ElRadio>
              <ElRadio :value="STORAGE_MODES.MONTH">
                月
              </ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem label="时间范围">
            <ElDatePicker
              v-model="timeRange"
              :type="pickerType"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :format="pickerFormatter"
              :value-format="pickerFormatter"
              range-separator="至"
              :clearable="false"
            />
          </ElFormItem>
          <ElFormItem>
            <SearchButton @click="clickSearch" />
          </ElFormItem>
        </ElForm>
      </div>
      <div class="width-fill flex flex-shrink-0 items-center justify-between gap-4" style="height: 35vh;">
        <div class="height-fill rounted-sm padding-xs w-[50%] border">
          <PieChart :title="pieTitle1" :data="pieData1" />
        </div>
        <div class="height-fill rounted-sm padding-xs w-[50%] border">
          <PieChart :title="pieTitle2" :data="pieData2" />
        </div>
      </div>
      <div class="roll width-fill mt-4 flex-1" style="min-height: 250px;">
        <div class="height-fill rounted-sm padding-xs flex flex-col border">
          <ElSelect v-model="type" class="free type-select">
            <ElOption :value="CONSUMPTION" :label="CONSUMPTION_TEXT" />
            <ElOption :value="COST" :label="COST_TEXT" />
          </ElSelect>
          <LineChart
            :title="lineData.value.title"
            :x="lineData.value.x"
            :data="lineData.value.data"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.type-select {
  width: 120px;
}
</style>
